<template>
    <div id="slider" :style="bgColor">
        <!-- 写死的值，可以直接用height，interval，如果是双向绑定的需要写   v-bind:height -->
        <slider animation="fade" height='336px' @changeSlide="changeColor" >
            <p style="line-height: 280px; font-size: 5rem; text-align: center;" v-if="!list.length">Loading...</p>
            <slider-item v-for="(i, index) in list" :key="index" on-click="toPlaylist">
                <div class="wrap">
                    <img :src="i.coverImgUrl" height="980px" id="image" @click="toPlaylist(i)">
                </div>
            </slider-item>
        </slider>
    </div>
</template>

<script>
    import 'RGBaster'
    import {playlist} from "./../service/getData"
    import {banner} from  './../service/getDate'
    import {Slider, SliderItem} from 'vue-easy-slider'

    export default {
        name: 'banner',
        data () {
            return {
              list: [],
              carouselBg: {},
              bgColor: {},
            }
        },
        methods: {
          changeUrlToResizeImg(picUrl, size) {
            return picUrl.replace(/yunmusic_dev/, "resize_" + size + 'x' + size);
          },
          changeColor(e) {
            // console.log(e)
            if (this.list[e.index].bgColor !== undefined) {
              this.bgColor = this.list[e.index].bgColor
              // console.log(this.bgColor)
            }
          },
          toPlaylist (item) {
          // <router-link :to="{path:'playlistDetail',query:{id:i.id}}" :title="i.name" class="msk">
          //     </router-link>
            this.$router.push({path:'playlistDetail',query:{id:item.id}});
          },
          getPlaylistsWithPageNum (pageNum) {
            let _this = this;
            _this.list = [];
            playlist(this).get({
              playlist: 'playlist',
              pageNum: pageNum,
              pageSize: 6,
              order: 'hot'
            }).then(res => {
              console.log(res);
              let status = res.body.status;
              if (status === 200) {
                let data = res.body.data;
                // _this.pageNum = data.page;
                // _this.pages = data.pages;
                _this.list = data.rows;

                _this.list.forEach(function (item) {
                  RGBaster.colors(item.coverImgUrl, {
                    success: (payload) => {
                      let reg = /\d+/g
                      let cnum = payload.dominant.match(reg)
                      // let color = `rgba(${cnum[0]}, ${cnum[1]}, ${cnum[2]}, 0.9)`
                      let color = `rgb(${cnum[0]}, ${cnum[1]}, ${cnum[2]})`
                      // _this.bgColor = 'background-color: ' + color;
                      // _this.carouselBg = `background: linear-gradient(to bottom, ${color} 0%, rgb(249, 250, 252))`
                      item['bgColor'] = {backgroundColor: color};
                      item['carouselBg'] = `{background: linear-gradient(to bottom, ${color} 0%, rgb(249, 250, 252)); }`
                      console.log(item['carouselBg'])
                      console.log(item['bgColor'])
                    },
                    exclude: [ 'rgb(0,0,0)' ]
                  })
                })

              }


            });
          },
        },
        mounted () {
          this.getPlaylistsWithPageNum(1);
//            var api=this.$store.state.proxyUrl;
//          因为vue-resource绑定的this必须是当前的上下文，所以得传进去
//             banner(this).get().then(res => {
//                 this.list = res.body.banners;
//             });
//           也可以这么bind一下，但是，实在是uglify
//           banner.bind(this)().get()
//               .then(res => {
//                console.log(res)
//                this.list = res.body.banners;
//            });

        },
        components: {
            'Slider': Slider,
            'SliderItem': SliderItem
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    img {
      /*width: 980px;*/
      margin: -300px -300px 0 0;
      /*height: 336px;*/


    }

    .wrap {
      height: 980px;
      width: 980px;
      cursor:pointer;
      /*overflow: hidden;*/

      /*text-align: center;*/
      margin-left: auto;
      margin-right: auto;

    }
</style>
